"use client";

import { memo, useRef } from "react";
import type { ReactNode, FC } from "react";
import type { CarouselRef } from "antd/lib/carousel";
import { Carousel } from "antd";

import styles from "./style.module.scss";
import CommonHeader from "@/components/common-header";
import { useAppSelector, shallowEqualApp } from "@/store/hooks";
import AlbumItem from "@/components/album-item";
interface IProps {
  children?: ReactNode;
}

interface Album {
  id: number;
  [key: string]: any;
}

const NewAlbum: FC<IProps> = (props) => {
  const carouselRef = useRef<CarouselRef>(null);
  function handlePreBtn() {
    carouselRef.current?.prev();
  }
  function handleNxtBtn() {
    carouselRef.current?.next();
  }
  const { items } = useAppSelector(
    (state: any) => ({
      items: state.recommended.newAlbums,
    }),
    shallowEqualApp
  );
  return (
    <div className={styles.newAlbumWrapper}>
      <CommonHeader
        icon={"sprite_02"}
        iconShow={true}
        name={"新碟上新"}
        moreLink={"/discover/release"}
        keywords={[]}
      ></CommonHeader>
      <div className={styles.album}>
        <div className={styles.banner}>
          <Carousel ref={carouselRef} dots={false}>
            {[0, 1].map((item) => {
              return (
                <div key={item}>
                  <div className={styles.albumList}>
                    {items
                      .slice(item * 5, (item + 1) * 5)
                      .map((album: Album) => {
                        return <AlbumItem item={album} key={album.id} />;
                      })}
                  </div>
                </div>
              );
            })}
          </Carousel>
        </div>
        <button
          className={`${styles.btnPre} sprite_02`}
          onClick={handlePreBtn}
        ></button>
        <button
          className={`${styles.btnNxt} sprite_02`}
          onClick={handleNxtBtn}
        ></button>
      </div>
    </div>
  );
};

export default memo(NewAlbum);
